<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Header from './common/Header.vue'
import Rank from './common/Rank.vue'
import requests from '../util/fetchUtils'

const title = ref("涨粉榜")

const dataList = ref({}) 
const type = ref(true)
const number = ref(1)
function convertJsonFormat(jsonData: any[]) {  
    return jsonData.map(item => {  
        const convertedItem = { ...item };  
        convertedItem.follower = (convertedItem.follower / 10000).toFixed(1);  
        convertedItem.follower_difference = (convertedItem.follower_difference / 10000).toFixed(1);  
        convertedItem.data_time = new Date(convertedItem.data_time).toLocaleString();  
        return convertedItem;  
    });  
}  

const getRankDesc=(day:number)=>{
    type.value=true
    if(day==1){
        number.value=1
    }else if(day==7){
        number.value=2
    }
    //请求数据
    let follower = requests<any>("/getRankDesc/"+day)
    follower.then(data => {
        dataList.value = convertJsonFormat(data)
    })
}

const getRankAsc=(day:number)=>{
    type.value=false
    if(day==1){
        number.value=3
    }else if(day==7){
        number.value=4
    }
    //请求数据
    let follower = requests<any>("/getRankAsc/"+day)
    follower.then(data => {
        dataList.value = convertJsonFormat(data)
    })
}
onMounted(() => {
    getRankDesc(1)
})
</script>
<template>
    <div class="fans container">
        <Header>{{ title }}</Header>
        <div class="date-nav">
            <div class="item" :class="{active:number==1}" @click="getRankDesc(1)">日增粉</div>
            <div class="item" :class="{active:number==2}" @click="getRankDesc(7)">周增粉</div>
            <div class="item" :class="{active:number==3}" @click="getRankAsc(1)">日减粉</div>
            <div class="item" :class="{active:number==4}" @click="getRankAsc(7)">周减粉</div>
        </div>
    </div>
    <template v-for="item in dataList">
        <Rank :user-info="item" :type="type"></Rank>
  </template>
</template>
<style lang="less">
@import url(../assets/css/base.less);

.fans {
    width: 10rem;
    margin: 0 auto;

    .date-nav {
        display: flex;
        margin-top: .5333rem;
        padding-bottom: .6133rem;
        justify-content: center;

        .item {
            font-size: .32rem;
            height: .64rem;
            background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(22, 41, 86, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
            border: .0133rem solid rgba(75, 194, 255, 0.2);
            box-shadow: inset 0px 0px .16rem rgba(75, 194, 255, 0.3);
            line-height: .64rem;
            padding-left: .2667rem;
            padding-right: .2667rem;

            &:not(:last-child) {
                margin-right: .5333rem;
            }

            &.active {
                background: linear-gradient(135deg, rgba(15, 29, 61, 1) 0.01%, rgba(37, 68, 137, 1) 51.27%, rgba(15, 29, 61, 1) 99.98%);
                border: .0133rem solid rgba(75, 194, 255, 0.6);
            }
        }
    }
}
</style>